<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <title>英雄联盟手游官网</title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <!-- 重置样式 -->
  <link rel="stylesheet" href="./css/reset.css" />
  <!-- 全局样式 -->
  <link rel="stylesheet" href="./css/global.css" />
  <!-- 菜单 -->
  <link rel="stylesheet" href="./css/menu.css" />
  <!-- 弹出层 -->
  <link rel="stylesheet" href="./css/pop.css" />
  <link rel="stylesheet" href="./css/page.css">
  <!-- 第二页 -->
  <link rel="stylesheet" href="./css/news.css">
  <!-- 第三页 -->
  <link rel="stylesheet" href="./css/game.css">
  <script>
    (function () {
      function setFont() {
        var psdWidth = 750;
        document.documentElement.style.fontSize = document.documentElement.clientWidth / psdWidth * 100 + "px";
      }
      setFont()
      window.addEventListener("resize", setFont);

    })()
  </script>
</head>

<body>
  <!--菜单 -->
  <div class="menu_container">
    <div class="menu_title">
      <a href="" class="menu_logo">
        <img src="./assets/logo.png" alt="">
      </a>
      <div class="menu_switch"></div>
      <div class="menu_attend" onclick="showPop('popAttend')">
        敬请关注
      </div>
    </div>
    <ul class="menu_nav">
      <li onclick="showPage(0)">敬请关注</li>
      <li onclick="showPage(1)">新闻资讯</li>
      <li onclick="showPage(2)">游戏特色</li>
      <li><a href="">问题反馈</a></li>
      <li onclick="showPop('popFAQ')">FAQ</li>
    </ul>
  </div>
  <!-- 页面 -->
  <div class="page_container">
    <!-- 第一个 -->
    <div class="page">
      <div class="attention_container">
        <div class="attention_slogon">
          <span style="z-index: 100;" class="attention_play" onclick="showPop('popVideo')"></span>
        </div>
        <div class="attention_button" onclick="showPop('popAttend')"></div>
        <i class="g_arrowdown"></i>
      </div>

    </div>
    <!-- 第二个 -->
    <div class="page">
      <div class="news_container">
        <div class="g_carousel-container" id="newsCarousel">
          <ul class="g_carousel-list" style="width: 300%; margin-left: 0px;">

          </ul>
          <ul class="g_carousel-indicator">
            <li class="selected"></li>
            <li class=""></li>
            <li class=""></li>
          </ul>

        </div>
        <div class="news_bar">
          <a class="news_title selected">新闻</a>
          <a class="news_title" href="https://lolm.qq.com/m/news_list.html">
            更多
          </a>
        </div>
        <ul class="news_list">
          <li>
            <span>公告</span>
            <p>2020-10-29 11:48:40</p>
            <a href="https://lolm.qq.com/m/news_detail.html?docid=3842629219720839681" target="_blank">
              关于《英雄联盟手游》不实宣传信息辟谣说明
            </a>
          </li>
          <li>
            <span>公告</span>
            <p>2020-06-06 12:19:24</p>
            <a href="https://lolm.qq.com/m/news_detail.html?docid=11707851284894564543" target="_blank">
              关于英雄联盟手游不实信息辟谣说明及安全提醒
            </a>
          </li>
          <li>
            <span>新闻</span>
            <p>2020-03-19 07:18:55</p>
            <a href="https://lolm.qq.com/m/news_detail.html?docid=15500991410988232284" target="_blank">
              嘿！《英雄联盟》手游开发者日志来了！
            </a>
          </li>
          <li>
            <span>公告</span>
            <p>2019-12-18 10:37:32</p>
            <a href="https://lolm.qq.com/m/news_detail.html?docid=14465640197406156744" target="_blank">
              关于近期不实信息的说明
            </a>
          </li>
        </ul>

      </div>
    </div>
    <!-- 第三个 -->
    <div class="page">
      <div class="game_container">
        <div class="g_carousel-container" id="gameCarousel">
          <ul class="g_carousel-list" style="width: 300%; margin-left: 0px;">

          </ul>
          <ul class="g_carousel-indicator">
            <li class="selected"></li>
            <li class=""></li>
            <li class=""></li>
          </ul>
          <div class="g_carousel-prev disabled"></div>
          <div class="g_carousel-next"></div>
        </div>
        <div class="game_desc">
          风靡全球的MOBA经典之作《英雄联盟》正版手游预约正式开启!
        </div>
        <div class="game_detail" onclick="showPop('popDetail')"></div>
        <div class="game_brand">
          <div class="game_brand-item" onclick="showPop('popWeixin')"></div>
          <div class="game_brand-item" onclick="showPop('popYxq')"></div>
          <a href="//s.p.qq.com/pub/jump?d=AADzqr1P" target="_blank" class="game_brand-item"></a>
          <a href="//weibo.com/u/7268748742" target="_blank" class="game_brand-item"></a>
          <div class="game_brand-item" onclick="showPop('popZm')"></div>
        </div>
        <div class="game_footer">
          <a href="" class="game_logo"></a>
          <a href="" class="game_riot"></a>
          <p>COPYRIGHT © 1998 - 2019 TENCENT.ALL RIGHTS RESERVED.</p>
          <p>腾讯公司 版权所有</p>
          <p>
            <a href="">粤网文[2017]6138-1456号</a>
            <span>|</span>
            <a href="">（总）网出证（粤）字第057号</a>
          </p>
        </div>

      </div>

    </div>
  </div>
  <!-- 弹窗-敬请关注 -->
  <div class="pop_container" id="popAttend" style="display: none;">
    <!-- 居中的弹窗容器 -->
    <div class="pop_inner">
      <p class="pop_title">选择预约平台</p>
      <div class="pop_top"></div>
      <div class="pop_mid">
        <div class="pop_content">
          <div class="pop_platform">
            <div class="pop_login">
              <div class="pop_wx"></div>
              <div class="pop_qq selected"></div>
            </div>
            <a href="" class="pop_button"></a>
          </div>
        </div>
      </div>
      <div class="pop_bottom"></div>
      <div class="pop_close">x</div>
    </div>
  </div>
  <!-- 弹窗-FAQ -->
  <div class="pop_container" id="popFAQ" style="display: none;">
    <!-- 居中的弹窗容器 -->
    <div class="pop_inner">
      <div class="pop_top"></div>
      <div class="pop_mid">
        <div class="pop_content">
          <ul class="pop_faq">
            <li>
              <p class="pop_q">Q：活动的持续时间是多久？</p>
              <p class="pop_ans">
                A：活动时间：2019年10月16日至游戏不删档测试开启当天0点结束
              </p>
            </li>
            <li>
              <p class="pop_q">
                Q：使用同一个帐号在各个渠道都进行了预约，预约奖励能够叠加吗？
              </p>
              <p class="pop_ans">
                A：亲爱的召唤师，预约的奖励每个账号只能领取一份，是不能叠加的。关注并参与后续其他预约活动，还有更加丰富的奖励可以领取哦！
              </p>
            </li>
            <li>
              <p class="pop_q">Q：预约奖励应该如何领取？</p>
              <p class="pop_ans">
                A：
                <span>使用QQ预约</span>
                ：预约成功后，预约礼包将以卡券形式发放至：动态-游戏-礼包-礼券仓库，游戏不删档测试开启后可以兑换领取。对于未收到卡券的玩家，预约奖励将在游戏不删档上线后，在游戏中通过邮件发放至预约的账户中。请各位召唤师耐心等待~
              </p>
              <p class="pop_ans">
                <span class="txit">使用微信预约</span>
                ：预约成功后，预约礼包将通过卡券的形式发放至：我-卡包-卡券，游戏不删档测试开启后可以兑换领取。对于未收到卡券的玩家，预约奖励将在游戏不删档上线后，在游戏中通过邮件发放至预约的账户中。请各位召唤师耐心等待~
              </p>
            </li>
            <li>
              <p class="pop_q">Q：预约失败，遇到了问题怎么办？</p>
              <p class="pop_ans">
                A：如果您遇到了任何特殊情况及问题，请点击链接提交您的问题，后续会有客服为您处理：
                <a href="https://kf.qq.com/touch/bill/191010selfqad0ca8c2d.html" target="_blank">
                  kf.qq.com/touch/bill/191010selfqad0ca8c2d.html
                </a>
              </p>
            </li>
          </ul>
          <a href="" class="pop_button"></a>
        </div>
      </div>
      <div class="pop_bottom"></div>
      <div class="pop_close">x</div>
    </div>
  </div>

  <!-- 弹窗-视频 -->
  <div class="pop_container" id="popVideo" style="display: none">
    <!-- 居中的弹窗容器 -->
    <div class="pop_inner">
      <video controls src="./assets/adv.mp4"></video>
      <div class="pop_close">x</div>
    </div>
  </div>
  <!-- 详情弹窗 -->
  <div class="pop_container" id="popDetail" style="display: none">
    <!-- 居中的弹窗容器 -->
    <div class="pop_inner">
      <div class="pop_top"></div>
      <div class="pop_mid">
        <div class="pop_content">
          <p>
            十年陪伴，无限热爱！风靡全球的MOBA经典之作——《英雄联盟》正版手游敬请关注！
            <br />
            真正的5V5公平竞技对战，传承端游纯正体验。人气英雄，经典还原；公平竞技，实力至上；峡谷传说，掌心再现。策略、战术、意识、配合，在移动端重现峡谷战场乐趣。
            <br />
            集结吧召唤师——欢迎来到英雄联盟，是时候展现真正的技术了！
          </p>
        </div>
      </div>
      <div class="pop_bottom"></div>
      <div class="pop_close">x</div>
    </div>
  </div>

  <!-- 弹窗-微信 -->
  <div class="pop_container" id="popWeixin" style="display: none">
    <div class="pop_inner">
      <div class="pop_top"></div>
      <div class="pop_mid">
        <div class="pop_content">
          <img src="./assets/qrcode_wx.jpg" alt="" />
        </div>
      </div>
      <div class="pop_bottom"></div>
      <span class="pop_close">x</span>
    </div>
  </div>
  <!-- 弹窗-微信 -->
  <div class="pop_container" id="popYxq" style="display: none">
    <div class="pop_inner">
      <div class="pop_top"></div>
      <div class="pop_mid">
        <div class="pop_content">
          <img src="./assets/qrcode_yxq.jpg" alt="" />
        </div>
      </div>
      <div class="pop_bottom"></div>
      <span class="pop_close">x</span>
    </div>
  </div>
  <!-- 弹窗-掌盟 -->
  <div class="pop_container" id="popZm" style="display: none">
    <div class="pop_inner">
      <div class="pop_top"></div>
      <div class="pop_mid">
        <div class="pop_content">
          <img src="./assets/qrcode_zm.jpg" alt="" />
        </div>
      </div>
      <div class="pop_bottom"></div>
      <span class="pop_close">x</span>
    </div>
  </div>

  <!-- 通用API -->
  <script src="./js/common.js"></script>
  <!-- 菜单 -->
  <script src="./js/menu.js"></script>
  <!-- 滚动拉动 -->
  <script src="./js/page.js"></script>
  <!-- 弹出层 -->
  <script src="./js/pop.js"></script>
  <!-- 新闻页 -->
  <script src="./js/news.js"></script>
  <!-- 第三页 -->
  <script src="./js/game.js"></script>
</body>

</html>